<template>
  <div>
    <van-nav-bar title="商品新增" left-text="返回" left-arrow v-back />
    <!-- <div class="product-edit__upload" v-bind:style="getIcon">
      <input type="file" @change="picChange" ref="file" />
      <i class="iconfont icon-tupianshangchuan" v-show="icon == ''"></i>
      <div class="product-edit__upload__clear" @click="delImg" v-show="this.icon != ''">
        <van-icon name="cross"></van-icon>
      </div>
    </div> -->
    <van-tabs v-model="active">
      <van-tab title="商品">
        <upload-pic @iconChange="iconChange"></upload-pic>
        <van-cell-group>
          <van-field v-model="name" label="商品名称" clearable v-validate="'required'" data-vv-name="商品名称"
            :error-message="errors.first('商品名称')" placeholder="请输入商品名称" required maxLength="12" />
          <van-field v-model="price" label="商品价格" clearable v-validate="'required|price'" data-vv-name="商品价格"
            :error-message="errors.first('商品价格')" placeholder="请输入商品价格" required />
          <van-field v-model="stock" label="库存" clearable v-validate="'required'" data-vv-name="库存"
            :error-message="errors.first('库存')" placeholder="请输入库存" required />
          <!-- <van-field v-model="tag" label="商品标签" placeholder="请输入商品标签（不超过8个字）" required /> -->
          <van-field v-model="detail" label="商品详情" clearable v-validate="'required'" data-vv-name="商品详情"
            :error-message="errors.first('商品详情')" type="textarea" required />
        </van-cell-group>
        <van-radio-group v-model="radio">
          <van-cell-group>
            <van-cell title="自营商品" clickable @click="radio = '1'">
              <van-radio name="1" />
            </van-cell>
            <van-cell title="其他水厂" clickable @click="radio = '0'">
              <van-radio name="0" />
            </van-cell>
          </van-cell-group>
        </van-radio-group>

        <!-- <van-cell title="爬楼费">
          <van-checkbox v-model="deliver" shape="square"></van-checkbox>
        </van-cell> -->
        <van-button class="bottom-btn" size="large" @click="save" type="info">保存</van-button>
      </van-tab>
      <van-tab title="爬楼费">
        <palou-add></palou-add>
      </van-tab>
    </van-tabs>

  </div>
</template>

<script>
  import {
    PRODUCT_ADD
  } from '@/api/product'
  import {
    mapState
  } from 'vuex'
  import UploadPic from '@/components/UploadPic'
  import PalouAdd from './PalouAdd'
  export default {
    components: {
      UploadPic,
      PalouAdd
    },
    data() {
      return {
        active: 0,
        name: '',
        price: 0,
        stock: 0,
        tag: '',
        detail: '',
        radio: '1',
        icon: '',
        deliver: false,
      }
    },
    computed: {
      ...mapState(['stationInfo']),
    },
    mounted() {
      if (this.$route.query.palou) {
        this.active = 1
      }
    },
    methods: {
      save() {
        if (!this.icon) {
          this.$toast('请选择图片');
          return;
        }
        this.$validator.validateAll().then((result) => {
          if (result) {
            let param = {
              name: this.name,
              icon: this.icon,
              description: this.detail,
              price: this.price,
              stationId: this.stationInfo.id,
              own: parseInt(this.radio),
              stock: parseInt(this.stock),
              deliver: 0
            }
            this.$reqPost(PRODUCT_ADD, param).then(res => {
              this.$router.go(-1);
              this.$toast('新增成功');
            }).catch(err => {
              this.$toast('新增失败');
            })
          }
        });
      },
      iconChange(val) {
        this.icon = val;
      }
    }
  }

</script>
